<template>
	<view class="container">
		<view class="cont-box">
			<view class="dis-flex search-input-box">
				<view class="search-input">
					<view class="dis-flex search-box">
						<view class="left">
							<!-- <icon color="rgba(180,180,180,1)" size="15" type="search"></icon> -->
							<text class="iconfont icon-sousuo f-30"></text>
						</view>
						<view class="right">
							<input @blur="getSearchContent" class="input" focus="true" placeholder="请输入您搜索的商品" placeholder-style="color:#aba9a9"
							 type="text"></input>
						</view>
					</view>
				</view>
				<view class="serch-button">
					<button @tap="search" type="warn"> 搜索 </button>
				</view>
			</view>
			<view class="search-cont-box" v-if="recentSearch.length">
				<view class="title-box">最近搜索
					<text @tap="clearSearch" class="iconfont icon-lajixiang col-7"></text>
				</view>
				<view class="sale-button-box">
					<view class="seconds-kill-li" v-for="(recent,index) in recentSearch" :key="index">
						<view @tap="goSearch" class="recent-button" :data-text="recent">{{recent}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				recentSearch: {},
				searchValue: '',
			}
		},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			// 获取历史搜索
			this.getRecentSearch();
		},

		methods: {

			/**
			 * 获取历史搜索
			 */
			getRecentSearch: function() {
				let recentSearch = uni.getStorageSync('recentSearch');
				this.setData({
					recentSearch
				});
			},

			/**
			 * 绑定输入值
			 */
			getSearchContent: function(e) {
				this.searchValue = e.detail.value;
			},

			/**
			 * 搜索提交
			 */
			search: function() {
				if (this.searchValue) {
					// 记录最近搜索
					let recentSearch = uni.getStorageSync('recentSearch') || [];
					let index = recentSearch.indexOf(this.searchValue);
					index > -1 && recentSearch.splice(index, 1);
					recentSearch.unshift(this.searchValue);
					uni.setStorageSync('recentSearch', recentSearch)
					// 跳转到商品列表页
					uni.navigateTo({
						url: '../category/list?search=' + this.searchValue,
					})
				}
			},
			/**
			 * 清空最近搜索记录
			 */
			clearSearch: function() {
				uni.removeStorageSync('recentSearch');
				this.getRecentSearch();
			},

			/**
			 * 跳转到最近搜索
			 */
			goSearch: function(e) {
				uni.navigateTo({
					url: '../category/list?search=' + e.target.dataset.text,
				})
			},
		},

	}
</script>

<style>
	/* common.wxss */
	@import url("../../utils/common.scss");

	/* 搜索框 */
	.index-cont-search .iconfont {
		margin: 10upx;
		font-size: 15px;
	}

	.index-cont-search text {
		margin: -1upx;
	}

	.seconds-kill-li {
		padding: 10upx;
		box-sizing: border-box;
		width: 33.3%;
		float: left;
	}

	.title-box {
		font-size: 10pt;
		padding: 50upx 0 0 0;
		color: #777;
	}

	.title-box .icon-lajixiang {
		float: right;
	}

	.sale-button-box {
		padding: 10px 0;
		overflow: hidden;
	}

	.sale-button,
	.recent-button {
		background: #fff;
		padding: 10upx;
		border-radius: 100upx;
		justify-content: center;
		text-align: center;
		font-size: 26upx;
		border: 2upx solid #eee;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		height: 30upx;
		line-height: 30upx;
	}

	.serch-button button {
		background: #ff495e;
	}

	/* asd */

	.search-input-box {
		height: 64upx;
	}

	.search-input {
		width: 80%;
		background: #fff;
		border-radius: 10upx 0 0 10upx;
		padding-left: 10upx;
		box-sizing: border-box;
		overflow: hidden;
	}

	.search-input input {
		font-size: 30upx;
		height: 64upx;
		line-height: 64upx;
	}

	.serch-button {
		width: 20%;
		box-sizing: border-box;
	}

	.serch-button button {
		line-height: 64upx;
		height: 64upx;
		font-size: 28upx;
		border-radius: 0 10upx 10upx 0;
	}

	.seconds-kill-li {
		padding: 10upx;
		box-sizing: border-box;
	}

	.title-box {
		font-size: 10pt;
		padding: 50upx 0 0 0;
		color: #777;
	}

	.sale-button,
	.recent-button {
		background: #fff;
		padding: 10upx;
		border-radius: 50px;
		justify-content: center;
		text-align: center;
		font-size: 26upx;
		border: 1px solid #ccc;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		height: 30upx;
		line-height: 30upx;
	}

	.search-cont {
		padding: 0 15px;
		background: #fff;
	}

	.search-box .left {
		width: 28px;
	}

	.search-box .right {
		flex: 1;
	}

	.sale-button-box .seconds-kill-li {
		width: 33.3%;
		float: left;
	}

	.title-box image {
		width: 35upx;
		height: 35upx;
		float: right;
	}
</style>
